As we said in Chapter 1, there are two types of Markup in SML. Tag Markup includes all the things we covered in Chapter 1. The second type of markup in SML is called Output Markup. Output markup is used for outputting variables within SML. Variables are used to store and retrieve data from the attributes of a tag or feature block. For example, in an rss feed feature block, you can output the title of the rss feed by writing {{ rss_feed.source.first.title }}. This string literally reads "Output the title of the first rss source configured in the rss_feed feature block."

Global Context Variables

SML also has Global Context Variables which can be called from any SML page. Probably the most commonly used example of this is using the is_page_fan variable to "like gate" content.

{% if is_page_fan %}

<!-- content for fans of your page goes here -->

{% else %}

<!-- content for people who are not fans -->

{% endif %}

You could also write

{% unless is_page_fan %}

Message for people who are not fans telling them what they're missing

{% endunless %}

You can wrap that if logic around html, css, javascript, and even other sml.

<style>
.fangate {display:none;}

{% unless is_page_fan %}
  .inv_wrap {display:none;}
  .fangate {display:block; height: 1200px; width: 520px;
       background: top center no-repeat
       url({% editable_image name:"likegate" src_only:true %});}
{% endunless %}
</style>

Another good example of this is the “now” variable. Let’s output it and see what we get.

{{ now }} = Wed Jul 20 15:41:59 \-0700 2011

Now obviously, that format will not always work. One of the great things about SML’s Output markup system is that we can use inline Filters to modify the variables output. Let’s try “now” again using the ‘date’ filter.

{{ now | date:"%m / %d / %Y" }} = 07 / 20 / 2011

%m outpts the two-number month, %d outputs the day, and %Y outputs the four-number year. You can find a complete list of the available values for the date filter in the Language Reference http://developers.involver.com/display/IDN/date.

Using Assign to create custom variables

You can also create custom variables in SML. This can be done using assign, capture, capture_int, and editable_setting tags. Lets look at those one at a time.

The first method we’ll look at is assign. This method of assigning variables is particularly useful for taking strings of text and assigning them as variables which can be inserted throughout a page. One good example of this is for pulling repeated hex codes out of your css and consolidating them at the top of the page so it’s easy to change them.

{% assign slate = "#444" %}
{% assign red = "#b8011d" %}
{% assign black = "#000103" %}
{% assign white = "#ddd" %}

<style>
	.inv_wrap {background:{{slate}};}
		.inv_wrap .pane {background:{{white}};}
		.inv_wrap .pane h1 {color: {{slate}};}
		.inv_wrap .pane p {color:{{black}};}
		.inv_wrap .pane a {color:{{red}};}
</style>

In a short example like this there’s not a huge amount of value added, but as your style sheets get longer the usefulness of tools like this increases exponentially.

You can also use assign to set a boolean variable which controls content elsewhere in the page

{% assign monkey = true %}

{% if monkey %}
  bannanas!
{% else %}
  sadness
{% endif %}

Making variables editable with editable_setting

We could also use editable_settings to make these hex strings editable by the end user without them having to touch code.

{% editable_setting h1_color type: "string" default: "#444" %}
{% editable_setting link_color type: "string" default:"#b8011d" %}
{% editable_setting paragraph_color type: "string" default:"#000103" %}
{% editable_setting pane_background type: "string" default:"#ddd" %}

<style>
	.inv_wrap {background:{{paragraph_color}};}
		.inv_wrap .pane {background:{{pane_background}};}
		.inv_wrap .pane h1 {color: {{h1_color}};}
		.inv_wrap .pane p {color:{{paragraph_color}};}
		.inv_wrap .pane a {color:{{link_color}};}
</style>

<div class="inv_wrap">
	<div class="pane">
		{% editable_html name:"my_text" %}
</div>
</div>

You might also use assign to take a long complex variable string (from a feature block for instance) and re-name it to a shorter variable name that’s more convenient to type. Let’s say you want to pull the title of the first item in the list of approved contest entries from a contest feature block. Now you could call that item directly

<h1>{{contest.contest_entries.first.submission.title }}</h1>

And that would work just fine. But it’s a lot of typing if you want to call a bunch of different variables that can get old. So you might do something like this:

{% assign featured = contest.contest_entries.first %}
<h1>{{ featured.submission.title}}</h1>
<p>{{featured.submission.description | truncate: 240 }}</p>

In this example the new variable “featured” is a clone of contest.contest_entries.first and has all the same attributes. This will become very useful later on in the course.

Capturing text and outputs as variables.

One thing you’ll notice about the assign tag is that if you’re using it to rename an existing variable it lacks a way to run any filters on that variable to transform its data. you can access this functionality using the capture and capture_int tags.

Let’s take our “now” global context variable from the beginning of the chapter. We know we can can use the date filter on it. What might not be immediately obvious is that one of the attributes we can apply to the date filter will transform the output of now to be the number of seconds since January 1, 1970. It’s an arbitrary point in time but as good as any. The point is that it supplies a constantly increasing integer that we can run arithmetic if logic against once we use the capture_int tag to capture the transformed output as an integer variable.

{% capture_int whattime %}{{ now | date:'%s' }}{% endcapture_int %}

{% if whattime > 1303775999 %}
            	First set of code, text, or other content
{% else %}
            	Second set of code, text, or other content.
{% endif %}

We’ll spend a lot more time on if logic in Chapter 6 but for now it’s enough to understand that anything and everything in between {% capture_int %} and {% endcapture_int %} will be captured as a variable and can be outputted later.

Another great use for capture is when you need to insert an editable_html block into javascript. Because editable_html automatically inserts \<p\> tags around any unwrapped text you can’t insert it directly. Instead you’ll need to capture it as a variable and then run the strip_html filter on it at output. Here’s an example of this method using a share dialog as an example.

<!-- assets for share dialog -->
{% capture share_text %}{% editable_html name:"share_text" %}{% endcapture %}
{% capture share_image %}{% editable_image name:"share_image" src_only:true %}{% endcapture %}


<div class="share"><a href="#" dialogtitle="Title of the share dialog goes here" caption="caption of the share goes here">Share</a></div>

<script>
$('.share a').click(function() {
  var dialog_title = $(this).attr('dialogtitle');
  var caption = $(this).attr('caption');
  sml.ui.Facebook.share({
    attachment: {
      name: dialog_title,
	  caption: caption,
      description: "{{share_text | strip_html}}",
      href: '{{ application_url }}',
	  media: [{
	        type: 'image',
	        src: "{{share_image}}",
	        href: '{{ application_url }}'
	      }]
    },
    action_links: [{
      text: 'Enter now!',
      href: '{{ application_url }}'
    }],
    success: function(post_id) {
      Analytics.logAction("Tab Shared");
    },
    error: function() {
      sml.log("Error! ");
    }
  });
  return false;
})
</script>

The javascript, taken directly from the Facebook developer docs, creates a share dialog when you click on an anchor inside the share div. You’ll notice the title and the caption are pulled directly out of custom attributes we’ve added to the anchor tag, the description text and image are set using captured editables, and the url to linkback to is set using the application_url global context variable. This is a great example of using sml outputs inside of javascript and you can use this code with little or no alteration over and over in production pages.

Using page_params_link to encode variables into URL’s

We’ve played with variables quite a bit at this point but up until now they’ve all been variables assigned on the tab. What if we want to take our abstraction further and customize our user experience based on variables passed in from outside the tab? We can do that using the [page_params_link|page_params_link] tag.
To determining what content to show based on variables passed into the page using [page_params_link|page_params_link]

{% page_params_link some_key:"some_value" another_key:"another_value" %}

Page params generates a url with the parameters encoded into it

{% if page_params.some_key == "some_value" %}
  The link was used
{% else %} 
  Link was not used
{% endif %}

and then the if logic shows different content based on those parameters when the url is used to access the tab.
As we’ve seen, you can even combine multiple necessary conditions, ‘or’ statements, and even arithmetic requirements in your [if] logic. Market segmentation is just the tip of the iceberg for what is possible here. 

Chapter 2 Review:

In this chapter we’ve looked at global context variables, assigning variables, and capturing variables.

What we haven’t done yet is had a chance to work with SML Feature Blocks, which are used to leverage Involver's applications while providing complete code-level customization of the user experience. Let’s do that now.